<template>
  <div class="goods_buy_box">
    <a href="javascript:;" class="gmjl" v-on:click="_QueryHistory">购买记录</a>
    <div class="goods_buy_box_item">
      <img v-bind:src="icon_primary_pass" alt="" />
      <p>{{ ed_time }}前有效</p>
      <h5>{{ name_primary_pass }}</h5>
      <div class="price" v-if="!goods_primary_isfree">
        <b>{{ `￥${price_primary_pass}` }}/</b>
        <b>1期</b>
      </div>
      <div class="price" v-if="goods_primary_isfree">免费</div>
      <div class="number-box" v-if="!goods_primary_isfree">
        <!-- <div class="remove" ></div> -->
        <input
          type="text"
          v-model="message01"
          v-bind:disabled="true"
          style="margin: 0 auto"
        />
        <!-- <div class="add"></div> -->
      </div>
      <a
        href="javascript:;"
        class="goods_lq"
        v-if="goods_primary_isfree && flag_primary_pass == 0"
        v-on:click="RcvFreePrimaryPass"
        >立即领取</a
      >
      <a
        href="javascript:;"
        class="goods_lq"
        v-if="goods_primary_isfree && flag_primary_pass != 0"
        v-on:click="RcvFreePrimaryPass"
        >已领取</a
      >
      <a
        href="javascript:;"
        class="goods_gm"
        v-if="!goods_primary_isfree"
        v-on:click="gmProduct(message01, goodsid_primary_pass)"
        >立即购买</a
      >
    </div>
    <div class="goods_buy_box_item">
      <img v-bind:src="icon_advacned_pass" alt="" />
      <p>{{ ed_time }}前有效</p>
      <h5>{{ name_advanced_pass }}</h5>
      <div class="price">
        <b>{{ `￥${price_advanced_pass}` }}/</b>
        <b>1期</b>
      </div>
      <div class="number-box">
        <!-- <div class="remove"></div> -->
        <input
          type="text"
          v-bind:disabled="true"
          v-model="message02"
          style="margin: 0 auto"
        />
        <!-- <div class="add"></div> -->
      </div>
      <a
        href="javascript:;"
        class="goods_gm"
        v-on:click="gmProduct(message02, goodsid_advanced_pass)"
        >立即购买</a
      >
    </div>
    <div class="goods_buy_box_item">
      <img v-bind:src="icon_exe" alt="" />
      <p>{{ ed_time }}前有效</p>
      <h5>等级经验</h5>
      <div class="price">
        <b>{{ `￥${price_exe}` }}/</b>
        <b>1期</b>
      </div>
      <div class="number-box">
        <div class="remove" v-on:click="relsove(3)"></div>
        <input type="text" v-model="message03" />
        <div class="add" v-on:click="add(3)"></div>
      </div>
      <a
        href="javascript:;"
        v-on:click="gmProduct(message03, goodsid_exe)"
        class="goods_gm"
        >立即购买</a
      >
    </div>
    <div class="model" v-show="isShow">
      <div class="inModel">
        <i class="closeBtn" v-on:click="closeModel"></i>
        <iframe
          id="iframe1"
          v-bind:src="srcUrl"
          width="604"
          height="420"
          scrolling="no"
          frameborder="0"
          allowtransparency="true"
          style="background-color: transparent"
        ></iframe>
      </div>
    </div>

    <!-- 我的购买记录 -->
    <div class="model2" v-show="buyFlag">
      <div class="inModel2">
        <h1>购买记录</h1>
        <i class="closeBTN" v-on:click="buyFlag = false">×</i>
        <div class="tbl">
          <div class="tbl_top">
            <span>购买用户</span>
            <span>购买商品</span>
            <span class="current">购买时间</span>
          </div>
          <ul>
            <li v-for="item in buyList" :key="item.id">
              <span>{{ item.user_name }}</span>
              <span>{{ item.show_name }}</span>
              <span class="current">
                <em>{{ item.create_time }}</em>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 我的购买记录  -->
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { Message } from "element-ui";
import { GetShop11Pay, QueryHistory, RcvFreePrimaryPass } from "../api/request";
export default {
  data() {
    return {
      message01: 1,
      message02: 1,
      message03: 1,
      srcUrl: "",
      isShow: false,
      buyFlag: false,
      buyList: [],
    };
  },
  computed: {
    ...mapState("templateDate", [
      "icon_primary_pass",
      "ed_time",
      "name_primary_pass",
      "price_primary_pass",
      "goods_primary_isfree",
      "flag_primary_pass",
      "name_advanced_pass",
      "price_advanced_pass",
      "icon_advacned_pass",
      "icon_exe",
      "price_exe",
      "goodsid_primary_pass",
      "goodsid_advanced_pass",
      "goodsid_exe"
    ]),
  },
  methods: {
    ...mapActions("templateDate", ["GetGiftDataAction", "getTemplateData"]),
    async gmProduct(val, goodsId) {
      var numReg = /^[0-9]*$/;
      var numRe = new RegExp(numReg);
      if (val <= 0) {
        Message.error("购买数量必须大于0");
      } else if (!numRe.test(val)) {
        Message.error("请输入数字");
      } else {
        const result = await GetShop11Pay({
          id: this.$route.query.id,
          amount: val,
          gid: goodsId,
        });
        if (result.errCode == 0) {
          this.srcUrl = result.msg;
          this.isShow = true;
        }else{
             Message.error(result.msg);
        }
      }
    },
    async _QueryHistory() {
      const result = await QueryHistory({ id: this.$route.query.id });
      console.log(result);
      if (result.errCode == 0) {
        this.buyFlag = true;
        this.buyList = result.data;
      }
    },
    async RcvFreePrimaryPass() {
      const result = await RcvFreePrimaryPass({ id: this.$route.query.id });
      console.log(result);
      this.getTemplateData({ id: this.$route.query.id });
      this.GetGiftDataAction({ id: this.$route.query.id });
    },
    closeModel() {
      this.srcUrl = "";
      this.isShow = false;
       this.getTemplateData({ id: this.$route.query.id });
        this.GetGiftDataAction({ id: this.$route.query.id });
    },
    add: function (val) {
      if (val == 3) {
        this.message03++;
      }
    },
    relsove(val) {
      if (val == 3) {
        debugger
        if (this.message03 <=1) {
          this.message03 = 1;
        } else {
          this.message03--;
        }
      }
    },
  },
};
</script>
<style>
.model {
  width: 100%;
  height: 100;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.inModel {
  width: 604px;
  height: 420px;
  background: #fff;
  position: absolute;
  top: 50%;
  margin-top: -210px;
  left: 50%;
  margin-left: -302px;
}

.closeBtn {
  position: absolute;
  width: 20px;
  height: 18px;
  background: url(https://img.5211game.com/5211/Act/2019/actMonthModel/images/colse.png);
  top: 7px;
  right: 7px;
  cursor: pointer;
  font-size: 12px;
  color: #fff;
}
</style>
